<template>
  <div class="ano-panel ano-text-panel" v-if="!childComName">
    <template v-if="!imageInfo.txt">
      <AnoPanelHd title="添加文字" />
      <div class="ano-panel-bd panel-bd-add">
        <div class="section-row section-txt">
          <div class="cnt">
            <el-input 
              class="panel-input"
              v-model.trim="formData.txt"></el-input>
            <div class="handle-wrap">
              <el-button class="panel-btn" type="primary" @click="onDesignAdd">添加到设计</el-button>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template v-else>
      <AnoPanelHd title="编辑文字" />
      <div class="ano-panel-bd panel-bd-edit">
        <div class="section-row section-txt">
          <div class="cnt">
            <el-input 
              class="panel-input"
              v-model.trim="formData.txt" @change="onTxtChange"></el-input>
          </div>
        </div>

        <div class="section-row section-font">
          <div class="label">字体</div>
          <div class="cnt">
            <div class="result" @click="handleSelectFont">
              <img class="res-img" src="../../../assets/imgs/custom_item_1.png" alt="">
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="section-row section-fontColor">
          <div class="label">字体颜色</div>
          <div class="cnt">
            <div class="result result-color" @click="handleSelectColor('fontColor')">
              <span class="res-colorName">White</span>
              <span class="res-color" :style="{backgroundColor: getColorByRgb(formData.colorR, formData.colorG, formData.colorB)}"></span>
            </div>
            <i class="el-icon-arrow-right" @click="handleSelectColor('fontColor')"></i>
          </div>
        </div>
        <div class="section-row section-rotate">
          <div class="label">旋转</div>
          <div class="cnt">
            <div class="slider">
              <el-slider 
                :value="+formData.angle + 0" 
                :min="-180" 
                :max="180" 
                @input="(e) => formData.angle = e"
                @change="onAngleChange"></el-slider>
            </div>
            <div class="result">
              <el-input class="panel-input-sort" 
                v-model.number.trim="formData.angle"
                @change="onAngleChange"></el-input>
            </div>
          </div>
        </div>
        <!-- <div class="section-row section-outline">
          <div class="label">外边框</div>
          <div class="cnt">
            <div class="cnt">
              <div class="slider">
                <el-slider v-model.trim="formData.outLineSize" :min="0" :max="5"></el-slider>
              </div>
              <div class="result result-color" @click="handleSelectColor('outlineColor')">
                <span class="res-colorName">White</span>
                <span class="res-color" :style="{backgroundColor: getColorByRgb(formData.outLineR, formData.outLineG, formData.outLineB)}"></span>
              </div>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div> -->
        <div class="section-row section-size">
          <div class="label">文字尺寸</div>
          <div class="cnt">
            <el-input class="panel-input-sort"
              v-model.number.trim="formData.fontSize"
              @change="onFontSizeChange"></el-input>
          </div>
        </div>
        <div class="section-row section-tools">
          <AnoTools 
            :img="formData" 
            :maxZIndex="maxZIndex" 
            :minZIndex="minZIndex"
            @change="onTranformChange" />
        </div>
      </div>
    </template>
  </div>
  <component 
    v-else 
    :is="childComName"
    :text="formData.txt"
    :active="activeColor"
    @colorChange="onColorChange"
    @fontChange="onFontChange"
    @confirm="onSelectionConfirm"
  ></component>
</template>

<script>
import AnoPanelHd from './anoPanelHd'
import AnoFonts from './anoFonts'
import AnoColors from './anoColors'
import AnoTools from './anoTools'

import { mapGetters, mapMutations } from 'vuex'
import Qs from 'qs'
import { getImageByWord } from '@/api/design'

export default {
  name: 'anoTextPanel',
  components: {
    AnoPanelHd,
    AnoFonts,
    AnoColors,
    AnoTools
  },
  props: {
    imageInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    maxZIndex: {
      type: Number,
      default: 0
    },
    minZIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      formData: {
        // left: 0,
        // top: 0,
        type: 'text',
        fontFamily: '宋体',
        fontSize: 200,
        outLineSize: 0,
        outLine: false,
        txt: '',
        colorR: 200,
        colorG: 200,
        colorB: 200,
        outLineR: 200,
        outLineG: 200,
        outLineB: 200,
        hide: false,
        angle: 0,
        zIndex: 9,
        isCenter: false,
        isLayerTop: false,
        isLayerButtom: false,
        isRotateX: false,
        isRotateY: false,
      },

      activeColorAttr: 'fontColor',

      childComName: '',
    }
  },
  computed: {
    ...mapGetters({
      activeImageIndex: 'getActiveImageIndex',
      activeMenuIndex: 'getActiveDesignMenuIndex'
    }),
    activeColor() {
      if (this.activeColorAttr === 'fontColor') {
        return this.getColorByRgb(this.formData.colorR, this.formData.colorG, this.formData.colorB)
      }
      if (this.activeColorAttr === 'outlineColor') {
        return this.getColorByRgb(this.formData.outLineR, this.formData.outLineG, this.formData.outLineB)
      }
      return 'rgb(255,255,255)'
    }
  },
  created() {
    this.formData = Object.assign({}, this.formData, {
      ...this.imageInfo
    })
  },
  methods: {
    ...mapMutations([
      'setActiveDesignComponent',
    ]),
    getColorByRgb(r, g, b) {
      if (!r || !g || !b) {
        return ''
      }
      return `rgb(${r}, ${g}, ${b})`
    },
    onTxtChange(e) {
      if (!e) {
        this.formData.txt = this.imageInfo.txt[0];
        return;
      }
      this.onDesignChange()
    },
    onAngleChange(e) {
      if (!e && e !== 0) {
        this.formData.angle = this.imageInfo.angle;
        return;
      }
      if (typeof +e !== 'number' || isNaN(e)) {
        this.formData.angle = this.imageInfo.angle;
        return;
      }
      this.formData.angle = e <= -180 ? -180 : e;
      this.formData.angle = e >= 180 ? 180 : e;
      this.onDesignChange()
    },
    onFontSizeChange(e) {
      if (!e) {
        this.formData.fontSize = this.imageInfo.fontSize;
        return;
      }
      if (typeof +e !== 'number' || isNaN(e)) {
        this.formData.fontSize = this.imageInfo.fontSize;
        return;
      }
      this.formData.fontSize = e <= 0 ? 0 : e;
      this.formData.fontSize = e >= 240 ? 240 : e;
      this.onDesignChange()
    },
    onDesignAdd() {
      this.$emit('designAdd', {
        ...this.formData,
        outLine: this.formData.outLineSize >= 0 ? true : false
      })
    },
    onDesignChange() {
      console.log('designChange')
      this.$emit('designChange', {
        ...this.formData,
        outLine: this.formData.outLineSize >= 0 ? true : false
      })
    },
    handleSelectFont() {
      this.childComName = 'AnoFonts'
    },
    handleSelectColor(attr) {
      this.activeColorAttr = attr;
      this.childComName = 'AnoColors'
    },
    onColorChange(colorItem) {
      this.childComName = ''
      if (this.activeColorAttr === 'fontColor') {
        this.formData.colorR = colorItem.colorR;
        this.formData.colorG = colorItem.colorG;
        this.formData.colorB = colorItem.colorB;
      }
      if (this.activeColorAttr === 'outlineColor') {
        this.formData.outLineR = colorItem.colorR;
        this.formData.outLineG = colorItem.colorG;
        this.formData.outLineB = colorItem.colorB;
      }
      this.onDesignChange()
      console.log(colorItem, '-onColorChange colorItem--')
    },
    onFontChange(font) {
      this.childComName = ''
      this.formData.fontFamily = font.fontName
      this.onDesignChange()
      console.log(font, '-onFontChange font--')
    },
    onSelectionConfirm() {
      this.childComName = ''
    },
    onTranformChange(res) {
      this.formData = Object.assign({}, this.formData, {
        ...res
      })
      this.onDesignChange()
    }
  }
}
</script>

<style lang="less">

</style>

<style lang="less" scoped>
.ano-text-panel {
  .panel-input {
    display: block;
    margin-bottom: 15px;
  }
  .panel-bd-edit {
    .section-row {
      border-top: 1px solid #ddd;
      padding: 5px 5px 5px 10px;
      &:first-child {
        border-top: 0;
      }
    }
  }
}
.section-rotate {
  .slider {
    flex: 1;
    margin-left: 30px;
    margin-right: 30px;
  }
}
.section-outline {
  .slider {
    flex: 1;
    margin-left: 30px;
    margin-right: 30px;
  }
}

</style>
